@import "reset.less";

.login {
    background-image: linear-gradient(-20deg, #b721ff 0%, #21d4fd 100%);
    height: 100vh;
    width: 100vw;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;

    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;

    .center {
        background: #fff;
        padding: 25px;
        min-width: 370px;
        -webkit-box-shadow: 0 0 5px #333;
                box-shadow: 0 0 5px #333;
        
        h1 {
            color: #66a6ff;
            font-weight: bold;
            padding-bottom: 15px;
            text-align: center;
            -webkit-animation: moveTopBottom 2s linear forwards;
                animation: moveTopBottom 2s linear forwards;
            font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
        }

        .inputLi {
            margin-bottom: 15px;
            display: -webkit-box;
            display: -ms-flexbox;
            display: flex;
            -webkit-box-pack: justify;
                -ms-flex-pack: justify;
                    justify-content: space-between;

            input {
                -webkit-box-flex: 1;
                    -ms-flex: 1;
                        flex: 1;
                border: 1px solid #ddd;
                height: 45px;
                padding: 0 10px 0 40px;
                -webkit-box-sizing: border-box;
                        box-sizing: border-box;
                color: #66a6ff;
                font-size: 18px;
                outline: none;

                &::-webkit-input-placeholder {
                    color: #999;
                    font-size: 12px;
                }

                &:-ms-input-placeholder {
                    color: #999;
                    font-size: 12px;
                }

                &::-ms-input-placeholder {
                    color: #999;
                    font-size: 12px;
                }

                &::placeholder {
                    color: #999;
                    font-size: 12px;
                }
                &:focus{
                    border: 1px solid #66a6ff;
                }
            }

            .user {
                background: #fff url(../imgs/user.png) left 10px center no-repeat;
                background-size: 20px 20px;
            }

            .pwd {
                background: #fff url(../imgs/pwd.png) left 10px center no-repeat;
                background-size: 20px 20px;
            }

            button {
                background-image: -webkit-gradient(linear, left bottom, left top, from(#09203f), to(#537895));
                background-image: linear-gradient(to top, #09203f 0%, #537895 100%);
                border: none;
                height: 45px;
                color: #fff;
                outline: none;
                font-weight: bold;
                letter-spacing: 3px;
                font-family: "微软雅黑";
                font-size: 18px;
                cursor: pointer;
                -webkit-box-flex: 1;
                    -ms-flex: 1;
                        flex: 1;

                &:active {
                    opacity: 0.8;
                }
            }
        }

        .tip {
            font-size: 12px;
            color: #999;
        }
    }
    
    @-webkit-keyframes moveTopBottom {
        0%{
            -webkit-filter: grayscale(100%);
                    filter: grayscale(100%);
        }
        20%{
            -webkit-filter: grayscale(80%);
                    filter: grayscale(80%);
        }
        40%{
            -webkit-filter: grayscale(60%);
                    filter: grayscale(60%);
        }
        60%{
            -webkit-filter: grayscale(40%);
                    filter: grayscale(40%);
        }
        80%{
            -webkit-filter: grayscale(20%);
                    filter: grayscale(20%);
        }
        100%{
            -webkit-filter: grayscale(0%);
                    filter: grayscale(0%);
        }
    }
    
    @keyframes moveTopBottom {
        0%{
            -webkit-filter: grayscale(100%);
                    filter: grayscale(100%);
        }
        20%{
            -webkit-filter: grayscale(80%);
                    filter: grayscale(80%);
        }
        40%{
            -webkit-filter: grayscale(60%);
                    filter: grayscale(60%);
        }
        60%{
            -webkit-filter: grayscale(40%);
                    filter: grayscale(40%);
        }
        80%{
            -webkit-filter: grayscale(20%);
                    filter: grayscale(20%);
        }
        100%{
            -webkit-filter: grayscale(0%);
                    filter: grayscale(0%);
        }
    }
}